<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('流程定义明细列表')"/>
    <th:block th:include="include :: jasny-bootstrap-css"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div id="uploadBtn" class="fileinput fileinput-new" data-provides="fileinput">
                <span class="btn btn-outline-secondary btn-file">
                    <span class="fileinput-new">
                        <a class="btn btn-warning btn-sm">
                            <i class="fa fa-upload"></i>&nbsp;部署
                        </a>
                    </span>
                    <span class="fileinput-exists">Change</span>
                    <input type="file" name="processDefinition" multiple>
                </span>
            <span class="fileinput-filename"></span>
            <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: jasny-bootstrap-js"/>
<script th:inline="javascript">
    var prefix = ctx + "business/detail";   //ctx为应用上下文路径
    var definitionInfoId = [[${definitionInfoId}]];
    $(function () {
        /** 流程定义明细列表展示 */
        var options = {
            url: prefix + "/list?id="+definitionInfoId,
            createUrl: prefix + "/add",
            modalName: "流程定义明细",
            columns: [{
                checkbox: true
            },
            {
                field: 'deploymentId',
                title: '流程部署id',
                visible: false
            },
            {
                field: 'definitionInfo.name',
                title: '流程名称',
            },
            {
                field: 'definitionInfo.description',
                title: '流程描述',
            },
            {
                field: 'deployTime',
                title: '部署时间'
            },
            {
                field: 'definitionInfo.definitionKey',
                title: '部署key'
            },
            {
                field: 'version',
                title: '版本号'
            },
            {
                title: '流程文件',
                formatter: function (value, row, index) {
                    var url = prefix + '/resource?type=xml&deploymentId='+row.deploymentId;
                    return '<a class="btn btn-success btn-xs" href="'+url+'" target="_blank"><i class="fa fa-search-plus"></i></a> ';
                }
            },
            {
                title: '流程图',
                formatter: function (value, row, index) {
                    var url = prefix + '/resource?type=png&deploymentId='+row.deploymentId;
                    return '<a class="btn btn-success btn-xs" href="'+url+'" target="_blank"><i class="fa fa-search-plus"></i></a> ';
                }
            }]
         };
        $.table.init(options);
        initUploadBtn();
    });

    /** 流程文件上传和部署 */
    function initUploadBtn() {
        $('#uploadBtn').on('change.bs.fileinput ', function (e) {// 监听到文件上传，调用此函数
            var formData = new FormData();
            formData.append("processFile", $('[name=processDefinition]')[0].files[0]);
            formData.append("definitionInfoId", definitionInfoId);
            $.ajax({
                url: prefix + '/deploy',
                type: 'post',
                data: formData,
                /*
                 默认true,代表以对象的形式上传的数据都会被转换为字符串的形式上传。
                 而当上传文件的时候，则不需要把其转换为字符串，因此要改成false
                 */
                processData: false,
                /*
                 对于上传文件contentType = multipart/form-data作为请求头是必须的，
                而普通的post请求头是 application/x-www-form-urlencoded.所以如果
                没有设置成false,是不能用来传输文件的
                 */
                contentType: false,
                success: function (result) {
                    $('#uploadBtn').fileinput('reset'); // 重置
                    $.operate.ajaxSuccess(result);//弹出msg刷新table表格
                }
            });
        });
    }
</script>
</body>
</html>